﻿<link href="/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>

<link href="/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="/assets/admin/layout/css/themes/light.css" rel="stylesheet" type="text/css" id="style_color"/>


<div class="page-container" style="margin: 5px">
        <div class="page-content">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="dashboard-stat blue-madison">
                        <div class="visual">
                            <i class="fa fa-comments"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                ${allProjects}
                            </div>
                            <div class="desc">
                                项目总数
                            </div>
                        </div>
                        <a class="more" data-toggle="modal" href="#responsive">
                            详情 <i class="m-icon-swapright m-icon-white"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="dashboard-stat red-intense">
                        <div class="visual">
                            <i class="fa fa-bar-chart-o"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                ${zhitouProjects}
                            </div>
                            <div class="desc">
                                直投项目
                            </div>
                        </div>
                        <a class="more" title="点击查询" data-title="直投项目明细" data-href="/zhitou-list" onclick="Hui_admin_tab(this)" href="javascript:;"">
                            详情 <i class="m-icon-swapright m-icon-white"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="dashboard-stat green-haze">
                        <div class="visual">
                            <i class="fa fa-shopping-cart"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                ${jijinProjects}
                            </div>
                            <div class="desc">
                                基金
                            </div>
                        </div>
                        <a class="more" title="点击查询" data-title="基金项目明细" data-href="/jijin-list" onclick="Hui_admin_tab(this)" href="javascript:;"">
                            详情 <i class="m-icon-swapright m-icon-white"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="dashboard-stat purple-plum">
                        <div class="visual">
                            <i class="fa fa-globe"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                ${errorProjects!}
                            </div>
                            <div class="desc">
                                异常项目
                            </div>
                        </div>
                        <a class="more" title="点击查询" data-title="异常项目明细" data-href="/business-errorProject-list" onclick="Hui_admin_tab(this)" href="javascript:;"">
                        详情 <i class="m-icon-swapright m-icon-white"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">

                    <div class="portlet">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-gift"></i>项目业务地图
                            </div>
                            <div class="tools">
                                <a href="" class="fullscreen">
                                </a>
                            </div>

                        </div>
                        <div class="portlet-body">
                            <div id="china-map" style="margin-top: 5px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<!-- END CONTAINER -->



<!-- /.modal -->
<div id="responsive" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">项目阶段统计</h4>
            </div>
            <div class="modal-body">
                <div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="container" style="height: 300px;width: 568px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn default">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="/lib/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="/assets/global/scripts/metronic.js" type="text/javascript"></script>

<script src="/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>

<script type="text/javascript" src="/echarts/js/echarts.min.js"></script>
<script type="text/javascript" src="/map/js/map/china.js"></script>





<!-- END PAGE LEVEL SCRIPTS -->
<script>
    jQuery(document).ready(function() {
        Metronic.init(); // init metronic core componets
        Layout.init(); // init current layout
    });
</script>
<script>
    var m = document.body.clientHeight;
    var pmw = $('.page-container').width();
    var ds = $('.dashboard-stat').height();
    var css = {
        height:parseInt(m-ds),
        width:pmw
    };
    $("#china-map").css(css);
    var myChart = echarts.init(document.getElementById('china-map'));

    var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
    var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

    var seriesData = ${provinceList};

    initEcharts("china", "中国");

    // 初始化echarts
    function initEcharts(pName, Chinese_) {
        var tmpSeriesData = pName === "china" ? seriesData : [];
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (个项目)'
            },
            series: [
                {
                    name: Chinese_ || pName,
                    type: 'map',
                    mapType: pName,
                    roam: false,//是否开启鼠标缩放和平移漫游
                    data: tmpSeriesData,
                    top: "10%",//组件距离容器的距离
                    zoom:1.1,
                    selectedMode : 'single',

                    label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#fbfdfe"}//省份标签字体颜色
                        },
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle:{color:"#323232"}
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: '#0550c3',//区域边框颜色
                            areaColor:"#4ea397",//区域颜色

                        },

                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor:"#ece39e",
                        }
                    },
                }
            ]

        };

        myChart.setOption(option);

        myChart.off("click");

        if (pName === "china") { // 全国时，添加click 进入省级
            myChart.on('click', function (param) {
                // 遍历取到provincesText 中的下标  去拿到对应的省js
                alert('aaa');
            });
        } else { // 省份，添加双击 回退到全国
            myChart.on("dblclick", function () {
                initEcharts("china", "中国");
            });
        }
    }

    // 展示对应的省
    function showProvince(pName, Chinese_) {
        //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
        loadBdScript('$' + pName + 'JS', '/map/js/map/province/' + pName + '.js', function () {
            initEcharts(Chinese_);
        });
    }

    // 加载对应的JS
    function loadBdScript(scriptId, url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        if (script.readyState) {  //IE
            script.onreadystatechange = function () {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  // Others
            script.onload = function () {
                callback();
            };
        }
        script.src = url;
        script.id = scriptId;
        document.getElementsByTagName("head")[0].appendChild(script);
    };
</script>

   <script type="text/javascript">
       var dom = document.getElementById("container");
       var myChart2 = echarts.init(dom);
       var app = {};
       var data = ${data};
       option = null;
       option = {
           xAxis: {
               type: 'category',
               data: ['入库', '立项', '决策', '投资', '投后', '退出']
           },
           yAxis: {
               type: 'value',
               axisLabels :{
                   formatter:function(value,index){
                       return parseInt(value);
                   },
                   textStyle:{color:'#7a8298'}
               }
           },
           series: [{
               data: data,
               type: 'bar'
           }]
       };
       if (option && typeof option === "object") {
           myChart2.setOption(option, true);
       }
   </script>
